<template>
    <div class="peraccount-main">
        <div class="step-block">
            <zw-steps :active="state.active" :steps="steps" />
        </div>
        <component
            :is="currentStep"
            @stepChange="stepChangeHandle"
            @apply="applyHandle"
            :query="state.query"
            class="step-main" />
    </div>
</template>
<script setup>
import { reactive, computed } from 'vue';
import request from '@/request';
import storage from '@/commons/storage';
import { ElMessage } from 'element-plus';
import ZwSteps from '@/components/Steps.vue';
import Step2 from './perupload.vue';
import Step3 from './linkcard.vue';
import Step1 from './perapply.vue';
import Step4 from './payReporting.vue';
import Step5 from './wechatOpenConfirm.vue';
import Step6 from './confirm.vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const queryLoginNo = route.query.no;
const steps = reactive([
    {
        title: '申请开户'
    },
    {
        title: '上传资料'
    },
    {
        title: '绑卡（仅对私卡）'
    },
    {
        title: '聚合支付报备'
    },
    {
        title: '微信开户意愿确认'
    },
    {
        title: '开通成功'
    }
]);
const state = reactive({
    // 当前步骤
    active: null,
    query: {
        // 企业维度 shopId 传 0
        shopId: location.pathname.includes('/finance/baohutong') ? storage.get('ZW-SHOPID') : 0
    }
});
//1-待审核，2待上传，11.待绑卡 12 待绑卡-已发短信 13 已绑卡 8 待报备 9 开户意愿确认 10开通成功
const activeMap = { 1: 0, 2: 1, 11: 2, 12: 2, 13: 2, 8: 3, 9: 4, 10: 5 };
// 当前显示步骤的页面
const currentStep = computed(() => {
    return [Step1, Step2, Step3, Step4, Step5, Step6][state.active];
});
// 切换步骤
const stepChangeHandle = () => {
    const arr = location.search.split('?');
    if (arr.length > 1) {
        const newArr = arr[1].split('&');
        const login_no = newArr[0].split('=')[1];
        getInfo(login_no);
    }
};

// 步骤一开通成功后，显示步骤二
const applyHandle = data => {
    Object.assign(state.query, data);
    state.active = activeMap[data.accountStatus];
};

// 获取步骤详情数据
const getInfo = async login_no => {
    const { code, data, msg } = await request('baofuAccountInfoServ', { loginNo: login_no });
    if (code === 0) {
        Object.assign(state.query, data);
        state.active = activeMap[data.accountStatus];
    } else {
        ElMessage.error(msg);
    }
};

if (queryLoginNo) {
    getInfo(queryLoginNo);
} else {
    state.active = 0;
}
</script>
<style lang="scss" scoped>
.peraccount-main {
    max-width: 1450px;
    margin: 0 auto;
    .step-main {
        padding: 0 60px;
    }
    .step-block {
        padding: 25px 40px 0px;
        width: auto;
        text-align: center;
    }
}
</style>
